<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>11_CSS3-新增单位-em-rem</title>
        <style>
            #d1 {
                font-size: 20px;

                width: 20em;
                height: 10em;
                border: 1px solid black;
            }

            html {
                font-size: 20px;
            }
            /* rem是根据根元素也就是html标签的字体大小来放大倍数 
            如果没指定根元素的字体大小 那么根据默认字体大小来放大倍数 也就是16px */
            #d2 {
                width: 20rem;
                height: 20rem;
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <!-- - em       本元素字体大小的倍数
             - rem     根元素字体大小的倍数，只与根元素字体大小有关。 
               r==>root
               root==》根元素 指的是html标签    
        -->

        <div id="d1">
            张三
        </div>

        <hr>

        <div id="d2">

        </div>




    </body>
</html>